<template>
  <view class="recommend">
    <view class="recommend-wrap">
      <!-- <view
        class="recommend-item"
        v-for="(item,index) in pics"
        :key="index"
      >
        <image :src="item" mode="widthFix"></image>
      </view> -->
      <swiper class="swiper" :circular="true" :indicator-dots="indicatorDots" :loop="true" :autoplay="autoplay" :interval="interval" :duration="duration">
          <swiper-item>
              <view class="swiper-item uni-bg" @click="goToActivity1">
                  <image src="../../../static/swiper1.png" mode="widthFix"></image>
              </view>
          </swiper-item>
          <swiper-item>
              <view class="swiper-item uni-bg" @click="goToActivity2">
                  <image src="../../../static/swiper.jpg" mode="widthFix"></image>
              </view>
          </swiper-item>
      </swiper>
    </view>
    <view class="month-wrap">
      <view class="month-title">
        <view class="month-title-info">
          <view class="month-info">
            <text>{{todayD}}/</text>{{todayM}}月
          </view>
          <view class="month-text">校内美食评分Top10</view>
        </view>
        <!-- 跳转到美食星球-->
        <view class="month-title-more" @click="handleMore">更多 <text class=" month-title-more icon iconarrow-right"></text></view>
      </view>
      <view class="month-content"></view>
    </view>
    <view v-for="(item,index) in data" :key="index">
      <food-card :item="item"></food-card>
    </view>
    <view v-if="!hasLogin">
      <goto-login></goto-login>
    </view>
    <view v-if="hasLogin && data.length===0">
      <image src="../../../static/empty.png" mode="aspectFill"/>
      <div style="text-align:center; margin-bottom:30px">暂无数据</div>
    </view>

  </view>
</template>

<script>
import moment from 'moment' // 日期处理插件
import FoodCard from '@/components/FoodCard'
import {getFoodTop, getCartoonPic} from '../../../api/food'
import {mapState} from 'vuex'
// import gotoLogin from '@/pages/share/gotoLogin'
import gotoLogin from '../../share/gotoLogin.vue'
export default {
  name: 'home-recommend',
  props: ['data'],
  components: {
    FoodCard, gotoLogin,
  },
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      todayM: (new Date()).getMonth()+1, // 当前月份
      todayD: (new Date()).getDate(), // 当前日期
      // 校内前10项美食
      top10: [],
      // 首页头部展示图片
			pics: [],
			cartoonList: [],
    }
  },
	computed: {
    ...mapState(['userInfo', 'hasLogin'])
  },
  methods: {
    // 报名
    goToActivity2() {
      swan.navigateTo({url:'/pages/mine/application/activity-apply'})
    },
    // 光盘
    goToActivity1() {
      swan.navigateTo({url:'/pages/mine/myDiskTable'})
    },
    // 更多按钮跳转
    handleMore() {
      swan.switchTab({url:'/pages/share/index'})
		},
		getFoods() {
			getFoodTop(this.userInfo.schoolId).then(res => {
				if (res.code !== 200) {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
				this.top10 = res.data
			})
		},
		getCartoonPic() {
			getCartoonPic().then(res => {
				if (res.code !== 200) {
					return uni.showToast({
							title: res.message,
							icon: 'none'
					})
				}
				this.pics.push(res.data[0])
				this.pics.push(res.data[5])
				this.pics.push(res.data[4])
				this.pics.push(res.data[8])
			})
    }
  },
  mounted() {
    console.log('mounted recommend')
		this.getFoods()
  }
}
</script>

<style lang='scss'>
  .recommend {
    .recommend-wrap {
      .swiper {
        height: 200px;
      }
    }
    .month-wrap {
      .month-title {
        display: flex;
        justify-content: space-between;
        padding: 20rpx;
        .month-title-info {
          color: $theme-color;
          font-size: 30rpx;
          font-weight: 600;
          display: flex;
          .month-info {
            text {
              font-size: 36rpx;
            }
          }
          .month-text {
            font-size: 34rpx;
            color: #666666;
            margin-left: 30rpx;
          }
        }
        .month-title-more {
          font-size: 24rpx;
          color: $theme-color;
        }
      }
    }
    .no-data {
        height: 50px;
        line-height: 50px;
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: #666666;
    }
  }
</style>